<template>
    <el-form v-model="userForm" label-width="100px" style="padding: 10px;margin-top: 20px;margin-bottom: 120px;">
        <el-form-item label="新密码" class="update-input">
            <el-input class="detail-input" show-password v-model="userForm.userPassword"></el-input>
        </el-form-item>
        <el-form-item class="update-input" v-if="userForm.userPassword"
            label="密码强度" style="height: 25px">
            <!-- 展示长度条 -->
            <div class="bar" :style="{ background: barColor, width: width + '%' }">
                <!-- 展示文字 -->
                <div class="strength" :style="{ color: barColor }">
                    {{ strength }}
                </div>
            </div>
        </el-form-item>
        <el-form-item label="重复密码" class="update-input">
            <el-input class="detail-input" show-password v-model="userForm.rePassword"></el-input>
        </el-form-item>
        <el-form-item class="save-button">
            <el-button type="primary" @click="onUpdate">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import store from '@/stores';
import { reactive, onMounted, ref, watch } from 'vue'
import { type FormInstance, ElMessage } from 'element-plus';
import { checkPasswordRule, level } from '@/util/checkPassword'
import { useRoute, useRouter } from 'vue-router';
import { useUpdateInfoApi } from '@/api/user/user';

const router = useRouter()
const route = useRoute()

const userForm = reactive({
    userId: "",
    userPassword: "",
    rePassword: ""
})

// 强度条颜色
const barColor = ref('');
// 强度条长度
const width = ref('');
// 强度条说明
const strength = ref('');

// 监听注册页面的新密码变化状态，来改变密码强弱显示
watch(() => userForm.userPassword,
    (newVal) => {
        if (newVal !== '' && newVal) {
            const res: string = level(newVal);
            if (res == '非常弱') {
                barColor.value = 'red';
                width.value = '20';
                strength.value = '非常弱';
            } else if (res == '弱') {
                barColor.value = '#ee795c';
                width.value = '40';
                strength.value = '弱';
            } else if (res == '一般') {
                barColor.value = 'orange';
                width.value = '60';
                strength.value = '一般';
            } else if (res == '强') {
                barColor.value = 'green';
                width.value = '80';
                strength.value = '强';
            } else if (res == '非常强') {
                barColor.value = '#1B8EF8';
                width.value = '100';
                strength.value = '非常强';
            }
        }
    }
);

onMounted(() => {
    Object.assign(userForm, store.useUserStore.user)
})

const onUpdate = async () => {
    if (userForm.userPassword !== userForm.rePassword) {
        ElMessage({
            message: '两次新密码不相同',
            type: 'error'
        })
    } else {
        await useUpdateInfoApi(userForm).then(() => {
            ElMessage({
                message: '修改成功',
                type: 'success'
            })
            refresh()
        })
    }
}

function refresh() {
    // 刷新当前路由
    const { fullPath } = route
    router.replace({
        path: '/redirect' + fullPath
    })
}

</script>

<style scoped lang="scss">
.update-input {
    width: 300px;
}

.strength {
    font-size: 10px;
    color: #271E25;
    position: relative;
    top: 3px;
    left: 0;
    transition: 0.5s all ease;
}

.bar {
    /* width: 400px; */
    height: 5px;
    background: red;
    transition: 0.5s all ease;
    max-width: 300px;
    margin: 2px 0 2px 2px;
    position: absolute;
}
</style>